<template>
  <div class="bg-gray-500/15 rounded-4xl flex justify-between">
    <div
      v-for="(item, index) in tablist"
      :key="index"
      class="rounded-4xl px-15px py-4px border-blue-900 cursor-pointer"
      :class="{
        'border-1 bg-blue-500/15 text-blue-900': activeKey == item.id,
        'text-gray-500/50': activeKey != item.id,
      }"
      @click="lastget(item.id)"
      >{{ item.title }}</div
    >
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';

  const props = defineProps(['tablist']);

  const emit = defineEmits(['change']);
  const activeKey = ref<Number>();

  const lastget = (e: any) => {
    activeKey.value = e;
    emit('change', activeKey.value);
  };

  onMounted(() => {
    activeKey.value = props.tablist[0].id;
  });
</script>
